<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MyMusicSearch</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
	padding-top: 20px;
	padding-bottom: 40px;
}

/* Custom container */
.container-narrow {
	margin: 0 auto;
	max-width: 700px;
}

.container-narrow>hr {
	margin: 30px 0;
}

.jumbotron {
	margin: 60px 0;
	text-align: center;
}

.jumbotron h1 {
	font-size: 72px;
	line-height: 1;
}

.jumbotron .btn {
	font-size: 21px;
	padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
	margin: 60px 0;
}

.marketing p+h4 {
	margin-top: 28px;
}
</style>


<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Fav and touch icons -->
<link rel="shortcut icon" href="images/note.png"> 
<body style="font-family: Verdana">

	<%@include file="includes/navbar.jsp"%>

	<div class="container">

		<div class="jumbotron">
			<h1>Your songs</h1>
			<p class="lead">
			<div id="myCanvasContainer">
				<canvas width="600" height="400" id="myCanvas">
				<p>Generating songs ...</p>
				 </canvas>
			</div>
			</p>

			<a id="btnLoad" class="btn btn-large btn-success" href="#">Show
				more</a>
		</div>

		<div class="row">
			<div class="span6">
				<h2>Last.fm user?</h2>
				<p>If you already have a Last.fm user account and would like to
					contribute to this project by sharing your favorite songs just sign
					up with your account name</p>
				<p>
					<a class="btn" href="signup.jsp">Sign up now &raquo;</a>
				</p>
			</div>
			<div class="span6">
				<h2>Rate this app</h2>
				<p>Tell us your opinion about this application and help us to
					improve our service!</p>
				<p>
					<a class="btn" href="rating.jsp">Rate now &raquo;</a>
				</p>
			</div>
		</div>

		<%@include file="includes/footer.jsp"%>

	</div>
	<!-- /container -->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	<script src="js/jquery.tagcanvas.min.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready(
				function() {
					
					var start = 0;
					var offset = 10;

					var loadSongs = function(start, offset) {
						$.ajax({
							type : "GET",
							url : "/start",
							//url : "/my-music-search/testdata.json",
							dataType : "text",
							data : {
								service : "songs",
								start : start,
								offset : offset,
								method: 0,
								threshold : 0.02
							},
							error : function() {
								alert("Error: Could not connect to server!");
							},
							success : function(data) {
								var response = jQuery.parseJSON(data);
								if (response.error) {
									alert(response.error.errorname);
								} else if (response.resultset) {
									$("#myCanvas").empty();
									for ( var i = 0; i < response.resultset.length; i++) {
										$("#myCanvas").append(
												"<a target =\"_blank\" href=\""+ response.resultset[i].url + "\">"
														+ response.resultset[i].interpret
														+ " - "
														+ response.resultset[i].name
														+ "</a>");
									}

									if (!$('#myCanvas').tagcanvas({
										textColour : '#333',
										outlineThickness : 1,
										maxSpeed : 0.03,
										depth : 0.75,
										wheelZoom: false
									})) {
										//Error handling
									}
								}
							}
						});
					};

					//initial load
					loadSongs(start, offset);

					$("#btnLoad").click(function() {
						start += 10;
						offset += 10;
						loadSongs(start, offset);
					});

				});
	</script>

</body>
</html>